
import { useSearchParams, NavLink, useNavigate, useLocation } from "react-router-dom"
function AboutView() {
    // 获取about查询参数redirect的值
    const [SearchParams] = useSearchParams()
    // 获取redirect的值
    const redirect = SearchParams.get('redirect')
    // 导入navigate函数  用于跳转
    const navigate = useNavigate()
    // 获取路由信息
    const location = useLocation()
    // 渲染
    return (<div>
         {/* // 传递查询参数 */}
        <h1>About页面查询参数：-{redirect}</h1>
        <button onClick={() => { navigate("/") }}>跳转首页</button>
        <p>{JSON.stringify(location)}</p>
        {/* // 传递state参数 */}
        <NavLink
            state={{ from: location.pathname, to: "/produce/778" }}
            to={{ pathname: "/produce/778", search: "name=bingbing&age=18", hash: "dest" }}
        > 产品 </NavLink>
    </div>);
}

// 导出组件
export default AboutView;